/**
 * Created by LeonYang on 2016/3/16.
 * sky@skyf.org
 * Dependency: jquery.mousewheel, jquery.ui.draggable
 *
 * demo code:
 <div class="mapmarker-container">
 <div class="map" map-url="assets/images/map2.png" style="background: url('assets/images/map2.png') no-repeat left top;">&nbsp;
 </div>
 </div>
 <script type="text/javascript">
 //当前可移动坐标点
 var curitem = {id:19842119881221, name: '移动位置', locate: '0.1,0.1', move:true};
 $(function(){
            var spots = [
                {id: 1,name: '皇后玉溪', locate: '0.5, 0.5,', move: false},
                {id: 2,name: '鸟盖瓠壶', locate: '0.2, 0.2', move: false},
                {id: 3,name: '黄还是那', locate: '0.2, 0.3', move: false},
                {id: 4,name: '二三个', locate: '0.5, 0.2', move: false}
            ];
            spots.push(curitem);

            $(".mapspot-container").mapMarker({
                containerWidth:850,
                containerHeight:700,
                maxMapHeight:3000,
                stepFator: 0.1,
                zoom: true,
                spotArray: spots,
                zoomMWheel: false,
                moveStop: function(item){
                    curitem = item;
                    console.log(curitem.locate);
                }
            });
        });
 </script>
 */

(function ($) {
    /*注：Locate大小：50,45;中心点为：x:25,y:30*/
    $.fn.extend({
        mapMarker: function (options) {
            var defaults = {
                containerWidth: 700, //容器宽度
                containerHeight: 700, //容器高度
                maxMapHeight: 5000,
                stepFator: 0.1, //地图变化比例
                spotArray: [], //点位集合
                zoom: true,  //是否支持放大所辖
                zoomMWheel: true, //是否支持滚轮放大缩小
                moveStop: null //移动地图地图点否返回spot
            };
            var options = $.extend(defaults, options);
            $(this).css({width: options.containerWidth, height: options.containerHeight});
            var map = $(this).children(".map"), con = $(this), sizeRatio = 0.0, minMapHeight = 0.0;

            var locateRset = function(){
                //定位点到容器
                $.each(options.spotArray, function(idx, obj){
                    $(map).children('#spot-'+ obj.id).css({
                        left: $(map).width()*parseFloat(obj.locate.split(',')[0]) - 25,
                        top: $(map).height()*parseFloat(obj.locate.split(',')[1]) - 30,
                    });
                });
            };
            var setMapSize = function(h){
                $(map).height(h).width(h/sizeRatio);
                $(map).css("background-size",h/sizeRatio + "px " + h + "px");
            };
            var getSpot = function(id){
                for(var i=0;i < options.spotArray.length; i++){
                    if(options.spotArray[i].id == id){
                        return options.spotArray[i];
                    }
                }
                return null;
            };
            var zoomIn = function(){
                var height = $(map).height() * (1 + options.stepFator);
                if(height >= options.maxMapHeight){ return;}
                setMapSize(height);
                locateRset();
            };

            var zoomOrigin = function(){
                setMapSize(minMapHeight);
                locateRset();
            };

            var zoomOut = function(){
                var height = $(map).height() * (1 - options.stepFator);
                if(height <= minMapHeight){ return;}
                setMapSize(height);
                locateRset();
            };
            $(con).css({height: options.containerHeight, width: options.containerWidth});
            $("<img/>").attr("src", $(map).attr("map-url")).load(function(){
                sizeRatio = this.height/this.width; //缩放比例

                var tempH = options.containerHeight;
                var tempW = tempH/sizeRatio;
                if(tempW < options.containerWidth){
                    tempW = options.containerWidth;
                    tempH = tempW*sizeRatio;
                }
                minMapHeight = tempH;

                //地图以容器高度做适配
                setMapSize(minMapHeight);
                //点添加到地图上
                $.each(options.spotArray, function(idx, obj){
                    $(map).append('<div class="spot" id="spot-' + obj.id + '" title="' +obj.name+ '">' + obj.name + '</div>');
                });
                $.each(options.spotArray, function(idx, obj){
                    if(obj.move){
                        $(map).children('#spot-'+ obj.id).addClass('spot-move').draggable({
                            containment: "parent",
                            stop: function( event, ui ) {
                                obj.locate = ((ui.position.left + 25)/$(map).width()).toFixed(7) + "," + ((ui.position.top + 30)/$(map).height()).toFixed(7);
                                if(options.moveStop != null){
                                    options.moveStop(obj);
                                }
                            }
                        });
                    }
                });
                locateRset();
            });
            //如果配置放大缩小
            if(options.zoom){
                $(con).append('<div class="zoom-in" title="放大比例">&nbsp;</div><div class="zoom-out" title="缩小比例">&nbsp;</div><div class="zoom" title="原始比例">&nbsp;</div>');
                if(options.zoomMWheel){
                    $(map).on('mousewheel', function(event) {
                        if(event.deltaY > 0) { zoomIn(); }
                        else{ zoomOut(); }
                    });
                }
                $(con).children('.zoom-in').click(zoomIn);
                $(con).children('.zoom-out').click(zoomOut);
                $(con).children('.zoom').click(zoomOrigin);
            }
        }
    });
})(jQuery);